<template>
  <div class="examBox">
    <a href="javascript:;" class="back" @click="goBack()">
      <i class="el-icon-arrow-left"></i>
      退出
    </a>
    <h2>{{ getCourseData.courseName }}</h2>
    <h4>{{ getExamData.examName }}</h4>
    <p class="quesType">【{{ getQuestionType[activeQue.questionType] }}】</p>
    <div class="progress">
      <div class="time">
        <i class="el-icon-time"></i>
        <span>{{ hour }}</span>
        <span>:</span>
        <span>{{ minu }}</span>
        <span>:</span>
        <span>{{ sec }}</span>
      </div>
      <div class="num">
        答题进度：{{ index + 1 }}/{{
          (getExamData.questionItems && getExamData.questionItems.length) || 0
        }}
      </div>
    </div>
    <div class="quesContent">
      <div style="border:1px solid #0066B5;padding:15px">
        <p
          class="quesBody noBr"
          v-html="
            index +
              1 +
              '.' +
              (activeQue.title && activeQue.title.replace(/<br\/?>/, ''))
          "
        ></p>
        <div class="answer">
          <div v-for="ans in activeQue.items">
            <div
              v-html="
                ans.prefix +
                  '.' +
                  (ans.content && ans.content.replace(/<br\/?>/, ''))
              "
              class="noBr"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <a href="javascript:;" @click="stopTime">暂停</a>
      <a href="javascript:;" @click="startTime(leftTime)">继续答题</a>
      <a href="javascript:;" style="float:right" @click="next()">下一题</a>
      <a href="javascript:;" style="float:right" @click="prev()">上一题</a>
    </div>
  </div>
</template>
<script>
import { getCourseById } from "@/api/course";
import { examDetail, examGetSetting } from "@/api/exam";
import { getClassSession } from "@/util/auth";
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
import { voteChoiseo } from "@/api/votesdk";
export default {
  name: "TrainExam",
  data() {
    return {
      time: {
        1: 120,
        2: 120,
        3: 120,
        4: 120,
        5: 120
      },
      timer: null,
      leftTime: 0,
      hour: "00",
      minu: "00",
      sec: "00",
      activeQue: {},
      index: 0,
      examId: "",
      courseId: "",
      setForm: {},
      autoPage: "2"
    };
  },
  computed: {
    ...mapGetters(["getExamData", "getCourseData", "getQuestionType"])
  },
  methods: {
    ...mapMutations(["SetCourseData", "SetExamData"]),
    goBack() {
      this.$router.goBack();
    },
    startTime(time) {
      this.stopTime();
      this.leftTime = time;
      this.timer = setInterval(() => {
        if (this.leftTime == 0) {
          this.stopTime();
          if (this.autoPage == 1) {
            this.next();
          }
          return;
          //超出时间下一题
        }
        this.leftTime--;
        this.setTime(this.leftTime);
      }, 1000);
    },
    stopTime() {
      clearInterval(this.timer);
    },
    setTime(time) {
      let timer = new Date(time * 1000);
      this.hour =
        timer.getUTCHours() > 9
          ? timer.getUTCHours()
          : "0" + timer.getUTCHours();
      this.minu =
        timer.getMinutes() > 9 ? timer.getMinutes() : "0" + timer.getMinutes();
      this.sec =
        timer.getSeconds() > 9 ? timer.getSeconds() : "0" + timer.getSeconds();
    },
    //获取题目
    getQues() {
      this.activeQue = this.getExamData.questionItems[this.index];
      //答题器接口
      voteChoiseo({
        // basementId: this.activeQue.id,
        classId: getClassSession(),
        examId: this.examId,
        examType: 1,
        questionEditRequestVM: {
          id: this.activeQue.id
        }
      });
    },
    //上一题
    prev() {
      if (this.index == 0) {
        return;
      }
      this.index--;
      this.getQues();
      this.setTime(this.time[this.activeQue.questionType]);
      this.startTime(this.time[this.activeQue.questionType]);
    },
    //下一题
    next() {
      if (this.index == this.getExamData.questionItems.length - 1) {
        return;
      }
      this.index++;
      this.getQues();
      this.setTime(this.time[this.activeQue.questionType]);
      this.startTime(this.time[this.activeQue.questionType]);
    },
    async initMap() {},
    async initData() {
      if (!this.getCourseData.id) {
        await getCourseById(this.courseId).then(res => {
          if (res.code == 1) {
            this.SetCourseData(res.response);
          }
        });
      }
      if (!this.getExamData.id) {
        await examDetail(this.examId).then(res => {
          if (res.code == 1) {
            this.SetExamData(res.response);
          }
        });
      }
      this.getQues();
      this.setTime(this.time[this.activeQue.questionType]);
      examGetSetting({
        classId: this.classId,
        courseId: this.courseId,
        examPaperId: this.examId
      }).then(res => {
        if (res.code == 1) {
          this.setForm = res.response;
          this.time[1] = this.setForm.choiceInterval;
          this.time[2] = this.setForm.choiceInterval;
          this.time[3] = this.setForm.judgeInterval;
        }
        this.startTime(this.time[this.activeQue.questionType]);
      });
    }
  },
  created() {
    this.examId = this.$route.params.id;
    this.courseId = this.$route.query.courseId;
    this.autoPage = this.$route.query.autoPage;
    this.classId = getClassSession();
    this.initData();
  }
};
</script>
<style lang="scss" scoped>
.examBox {
  position: fixed;
  z-index: 1000;
  height: 100%;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: #fff;
  padding: 30px;
  .back {
    position: absolute;
    top: 20px;
    left: 40px;
    width: 100px;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    color: #ff0409;
    i {
      font-size: 25px;
    }
  }
  .progress {
    position: absolute;
    top: 90px;
    right: 75px;
    width: 220px;
    height: 70px;
    background-color: #dee6ec;
    text-align: center;
    .time {
      height: 35px;
      line-height: 35px;
      i {
        color: #047edd;
        font-size: 25px;
        vertical-align: baseline;
      }
      span {
        font-size: 25px;
      }
    }
    .num {
      line-height: 35px;
      font-size: 25px;
    }
  }
  > h2 {
    font-size: 25px;
    font-weight: 100;
    text-align: center;
    line-height: 37px;
    height: 37px;
    color: #007cdc;
  }
  > h4 {
    color: #007cdc;
    font-size: 25px;
    font-weight: 100;
    text-align: center;
    line-height: 37px;
    height: 37px;
  }
  .quesType {
    font-size: 25px;
    line-height: 50px;
    font-weight: 400;
    margin-top: 20px;
  }
  .quesContent {
    width: 100%;
    height: calc(100% - 240px);
    margin-top: 20px;
    overflow-y: auto;
    .quesBody {
      font-size: 25px;
    }
    .answer {
      padding: 20px 0;
      font-size: 25px;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      > div {
        width: 50%;
        text-align: left;
        cursor: pointer;
        margin-bottom: 10px;
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 90px;
    width: 100%;
    left: 0;
    background-color: #fff;
    a {
      display: inline-block;
      height: 53px;
      line-height: 53px;
      width: 140px;
      background-color: #dee6ec;
      font-size: 25px;
      text-align: center;
      margin: 0 25px;
    }
  }
}
</style>
